import { Navigate, useRoutes } from "react-router-dom";
import Login from "../pages/Login";
import Main from "../pages/Main";
import Bbq from '../components/404';
import Home from "../pages/Main/Home";
import About from "../pages/Main/About";
import List from "../components/List";


const routers=[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/main',
        element:<Main/>,
        children:[
            {
                path:'/main/home',
                element:<Home/>,
                children:[
                   {
                    path:'/main/home/music/:id',
                    element:<List/>
                   },
                   {
                    path:'/main/home/news/:id',
                    element:<List/>
                   },
                ]
            },
            {
                path:'/main/about',
                element:<About/>
            },
        ]
    },
    {
        path:'/',
        element:<Navigate to='/login'/>
    },
    {
        path:'*',
        element:<Bbq/>
    },
]
export default routers;

export const GetRoutes=()=>{
    return useRoutes(routers)
}

export const useMyRoutes=()=>{
   return useRoutes(routers)
}


